Design Thinking

An approach: a hands-on, user-centric approach to innovative problem solving.

A process: six phases: empathize, define, ideate, prototype, test, implement

Empathize

Conduct research to develop an understanding of your users. Understanding user needs, preferences, and expectations by studying what users do, say, think, and feel.

Think-Aloud: The simplest and most powerful method for empathy 1> Identify representative users. 2> Ask users to perform representative tasks. 3> Observe and record what they say and do, noting obstacles, pain points, and failures.

Define

Combine all your data and derive where your users’ problems exist.

Affinity Diagramming: Definition: Organizing data into clusters based on “affinity.”

Step 1: Start with an initial set of categories Step 2: Sort notes into these categories Step 3: Add subcategories/consolidate as needed. Step 4: Present each category Step 5: Rank categories in severity, combining importance, prevalence, frequency

Ideate

Definition: An active, creative, exploratory, highly iterative, fast-moving collaborative process for forming ideas for design. Ideation can be done individually or collaboratively.

Sketching

Sketching is more effective than words for most ideas. Quick and inexpensive sketches do not inhibit exploration. Sketches are disposable. Principle: Prioritize attention to detail and comprehensiveness.

Storyboarding

Definition: A sequence of visual frames that illustrate user interaction with the envisioned system, capturing social, environmental, and technical factors that shape user experience.

Visual Design

Elements of Design (the tools to make art)

Line, Shape, Form, Color, Value, Texture, Space

Visual Hierarchy

Hierarchy is a visual design principle which designers use to show the importance of each page/screen’s contents by manipulating these characteristics

Principles of Design (how to use the tools to make art)

Focal Point, Contrast, Balance, Movement, Rhythm, Perspective, Unity

Key Components for UX Design

Type: Printed letters and characters of language.

1> A font is the style in which type is created. 2> A typeface is a font family that includes fonts of different variations that follow the same style. 3> A glyph is a particular character’

Color: Human visual perception of light reflecting from an object.

Monochromatic (单色系), Achromatic (无色的, 接近灰色调)

primary: red, yellow, blue secondary: orange, green, purple

images: Raster graphics(实物图), Vector graphics (矢量图)

Designing for the Desktop

Desktop applications: Dynamic, persistent screens and supporting components.

The WIMP Paradigm: Windows, icons, menus, and pointer, or WIMP that current desktop interfaces follow

Windows

Primary windows contain elements for the main functionality of the application, such as a canvas.
Secondary windows support main windows through modal panes, dialog boxes, etc.

Windows can be organized in a way that overlaps several windows or tiles them across the screen. Windows bring together dedicated panes in different configurations. Secondary windows can be docked, stacked, and floating.

Menus:

Menus list all the functions of the an application. Menu lists serve educational and reference purposes.

Toolbars, Palettes, Sidebars, & Tooltips

Tool palettes: provide advanced controls for a particular function rather than frequently accessed functions.

Pointing: on an application canvas enables a range of advanced capabilities for direct manipulation.

Designing for the Web

Webpages: Interconnected pages with aids that help users navigate and access a large body of content.

Primary Navigation Aids: Primary navigation aids take the form of menus/menubars and reflect the major areas or sections of a website.

Secondary Navigation Aids: Secondary navigation aids provide comprehensive links to specific content on the site as fat navigation(a broad or expansive navigation menu that displays a wide range of options or categories.), left-hand navigation, footer navigation.

Breadcrumbs and hierarchical lists are solutions to get to get back to previous pages or other pages that are higher in the navigation hierarchy.

Organizing Page Content: fold(折叠超出部分), Fitting It All in (pagination分页, infinite scroll滚轮)

Search: Faceted search helps users narrow down a search once results are returned
based on a simple query by providing functions to sort and filter the results. 搜索过滤器

Layout Design

— Creating a focal point 焦点

— Following the golden ratio 黄金分割 a close approximation of using the rule of thirds

— Using the rule of thirds，9分3x3

— Effectively using grids 栅格

— Integrating type: The use of headlines or blocks of text to guide the user’s attention to messages.

— Placing imagery 图片

— Using negative space

— Grouping using gestalt theory: Visual perception principles that predict how users will perceive design elements.

Includes four key principles: 1> Proximity 接近 2> Similarity 相似 3> Continuity 连续 4>Closure 封闭

— Creating visual hierarchy: Using relative positioning and sizing to communicate what design elements are more important and should be looked at first

— Exploiting visual scan patterns: Designing layouts that exploit common eye-scanning patterns, e.g., the F-pattern and the Z-pattern

— Creating contrast/emphasis 对比强调

Pros & Cons of Design Patterns

Pros: 1> Reducing design time and effort 2> Improving the quality of design solutions 3> Establishing familiarity across systems 4> Providing a baseline or state of the art
Cons: 1> Not every design problem will warrant a pattern 2> Patterns may not exist for new design space.

Interaction Design

Definition: Defining behaviors for a system that engages the full spectrum of its user’s perception, cognition, and movements.

Five Dimensions of Interaction Design: 1D: Words 2D: Visual representations 3D: Physical objects and space 4D: Time 5D: Behavior

Interaction Structure

Definition: The design of the organizing principle of an interactive system.

A set of structural categories: 1> “Show one single thing” 2> “Show a list or set of things” 3> “Provide tools to create a thing” 4> “Facilitate a task”

Interaction Design Paradigms

Implementation-centric: Interaction design maps directly to how system functions are implemented.

Metaphorical Design: Following a real-world metaphor that users are expected to be familiar with.仿真

Idiomatic Design: Building dedicated, highly expressive interaction capabilities that users must learn.

Developing Idioms: 1> Primitives: atomic actions (point, click) 2> Compounds: complex actions (double-click) 3> Idioms: higher-level elements (deleting text)

Affordances

Definition: The perceived properties of a design element that give clues about how to interact with it. Designers have borrowed the oncept from ecological psychology.

Perceptible affordances: an object’s characteristics imply an action.

Hidden Affordance: the affordance is not too obvious.

False Affordances: an action that is perceived by the user but in fact does not work as expected.

Wayfinding

Definition: User behavior where navigation across components follows a particular workflow or supports user goals.

Three key elements: 1> Signage 2> Environmental clues 3> Maps, e.g., site maps

Cost

Definition: The time and effort required by users to navigate between components.

Two key principles: 1> Minimize factors that increase cost of navigation: context switch, errors, delays. 2> Minimize travel time by minimizing number of steps and context switches

Aids

Definition: Design elements that aid users in navigating through content.

①Global navigation aids, e.g., menus, tabs, sidebars ②Utility navigation aids, e.g., sign in, help, print ③Associative/in-line navigation aids, e.g., related links

Models

1> Hub and spoke 2> Fully connected 3> Multi-level 4> Stepwise 5> Pyramid

1> Pan-and-zoom 2> Flat navigation 3> Modal panel 4> Clear entry points 5> Bookmarks 6> Escape hatch

Escape Hatch: Definition: provides users with the ability to go back to the main component/page in a complex structure without having to trace steps back.

Accessibility

Usability: The effectiveness, efficiency, and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.

Accessibility: The usability of a product, service, environment, or facility by people with the widest range of capabilities.

Accessibility is the extent to which an interactive product is accessible by as many people as possible.

The primary focus of accessible design is making systems accessible to individuals with disabilities.

Disability

Three Dimensions of Disability :

Impairment in a person’s body structure or function, or
mental functioning, Activity limitation(difficulty seeing, hearing, walking, or problem solving ), Participation Restrictions in activities of daily living.

Types of Impairment: Anatomical:

Sensory Impairment (Involves impairment in one or more senses, Involves loss of function to one or more parts of the body) / Physical Impairment (loss of function to one or more parts of the body ) / Cognitive Impairment (cognitive deficits 认知缺陷)

Common Impairments

1> Visual视觉 2> Motor/Mobility 肢体功能 3> Auditory听觉 4> Seizures 光敏癫痫 5> Cognitive/Learning 认知障碍

Impairments can vary in severity or structure depending on the source and nature of the impairment.
Severity: Children with cerebral palsy can have basic mobility or completely depend on a caretaker.
Structure: Vision impairments can include color blindness, peripheral-only vision, no light perception

Types of Impairment

Permanent impairment: Congenital or long-term conditions, such as color blindness, missing body
Temporary Impairment: Impairments that improve over time, such as recovery after illness or accidents, e.g., a broken arm.
Situational Impairment: Impairments introduced by context, such as environments with low light

Accessible design

Medical Model

Disability as personal attribute

In the context of health experience, a disability is any restriction or lack of ability (resulting from an impairment) to perform an activity in the manner or within the range considered normal for a human being.

definition: People are disabled by barriers in society, not by their impairment or difference.

Disability as context dependent

Disability is not just a health problem. It is a complex phenomenon, reflecting the interaction between features of a person’s body and features of the society in which he or she lives.

Context-dependent disability results from a mismatch between abilities and the environment:

Ability + Context = Disability

Principles of Universal Design

Equitable use: The design is useful and marketable to people with diverse abilities.
Flexibility in use: The design accommodates a wide range of individual preferences and abilities.
Simple and intuitive use: Use of the design is easy to understand, regardless of the user’s experience, knowledge, language skills, or current concentration level.
Perceptible information: The design communicates necessary information effectively to the user, regardless of ambient conditions or the user’s sensory abilities.
Tolerance for error: The design minimizes hazards and the adverse consequences of accidental or unintended actions.
Low physical effort: The design can be used efficiently and comfortably and with a minimum of fatigue.
Size and space for approach and use: Appropriate size and space is provided for approach, reach, manipulation, and use regardless of user’s body size, posture, or mobility.

Assistive Technologies

Definition: Specialized tools that close accessibility gaps.

Screen Readers
Screen Magnification
Text Reader
Braille for the Web: A mechanical device that translates textual content on the screen into Braille.
Alternative Input Devices: Head/mouth wands/pointers, Motion/eye tracking, Single-switch
Head/mouth wands/pointers
Motion/eye tracking
Single-switch
Speech input
Alternative & Augmentative Communication

Prototyping

Prototyping Methods

Paper Prototyping

Definition: Mocking up design ideas by sketching pages/screens with design elements using
design supplies and simulating how the envisioned system would respond to user input by swapping different pages/screens and moving/changing design elements.

Wireframes

Definition: Lo-fi prototypes of the makeup of a design in terms of its structural components. Wireframes can be hand-drawn or digitally created.

Most useful in the early-to-mid stages of the design process.

Annotations

Definition: Labels, explanations, and notes that provide further information on the goals, content, and functioning of the design elements illustrated on wireframes.

Key in addressing the problem of interpretability of simplified designs for all stakeholders.

Interactive prototyping

Definition: Creating realistic prototypes of the navigation or structural components (or both) of the
design idea by creating a series of screens/pages with design elements, linking these screens/pages for navigation, and simulating the transitions between screens/pages.

Interactive prototypes can use lo-fi or hi-fi components.

Native prototyping

Definition: Implementing and testing design ideas on the target technology platform of the design.

Prototyping Theory

Three-dimensional Model of Prototyping

Prototypes represent three dimensions of a design idea: 1> Role (the functions that the system serves) 2> Look and feel (Simulates the sensory experience of the user) 3> Implementation (capabilities that enable the system to perform its function)

Each dimension can be represented at various levels of fidelity.

Dimensions Combined: Integration Represents the complete user experience with the system as envisioned in the conceptual design.

Prototyping scope

Horizontal Prototype: Provides a broad view of the entire system and focus on the user interaction rather than the functionality.

Vertical Prototype: Focuses on a single feature/functionality and provides the full functioning.

Prototyping strategies

Throwaway prototyping:

Definition: Rapid prototyping and eventually discarding the prototype instead of further developing the model into a final product.

Most lo-fi and paper prototypes are throwaway prototypes. Throwaway prototyping is usually combined with sketching.

Evolutionary prototyping:

Definition: Also called breadboard prototyping, the design team incrementally builds prototypes of a design idea, tests the idea with users, and refines the prototype until it reaches the desired level of maturity.

Most products we use are evolutionary prototypes that went through alpha, beta, etc. phases.

Incremental prototyping:

Definition: Dividing system functionality into slices (vertical prototypes) based on design specifications and incrementally building each slice that is then integrated into the overall system.

Appropriate for large and complex projects.

Extreme prototyping:

Breaking down the development into three phases that build on each other: (1) building a static prototype, (2) building fully functional, interactive components that will simulate services, and (3) finally implementing the services.

Prototyping fidelity

Definition: The level of detail in which a design is represented in the prototype.

Low-fidelity (lo-fi) prototyping / High-fidelity (hi-fi) prototyping

The more “done” the prototype looks, the narrower the feedback will be; and vice versa. As a principle, use no higher resolution than is necessary.

lo-fi advantages: 1> lower cost 2> Enables exploring, communicating, and testing of conceptual designs 3> Prevents designers from prematurely wedding to specific design ideas 4> Allows rapid evaluation of multiple design ideas

lo-fi limitations: 1> Requires a facilitator to drive the prototype during testing and communication 2> Offers limited ability to identify breakdowns in design 3> Lacks sufficiently low-level specifications for development 4> Provides limited sense of feasibility

Choosing the right one: 1> Various methods, approaches, and strategies for prototyping

2> Criteria for choosing the right method: Design team goals, Capabilities and resources, Available time for prototyping

Mobile Design

Mobile Input

Mobile devices have unique capabilities, including input and sensing, that expand possibilities for interaction.

Mobile input primarily centers around the use of touch-sensitive screens that offer two capabilities: direct manipulation input and multi-touch gestures.

Direct Manipulation Input: In web and desktop interfaces, direct manipulation input involves mouse or trackpad input that is mapped to the screen using a relative mapping. On mobile devices, this mapping is absolute, and the user directly interacts with screen elements.

Multi-touch Gestures: Mobile input method include a number of idiomatic gestures dedicated to specific functions.(tap, double tap, drag, flick, pinch向里面挤, spread, press, press and tap, press and drag, rotate)

Motion Gestures: Gestures that involve moving the mobile device in specific ways, e.g., shaking to enable/disable silent mode. These gestures are usually application specific or customizable at the OS level.

Microinteractions

Definition: Microinteractions are contained product moments that revolve around a single use case.

Trigger

Definition: Events that initiate the microinteractions. Triggers can be manual/user-initiated or automatic/system-initiated.

Manual triggers involve intentional and explicit interaction with the system, e.g., by flipping a switch, pressing a button, speaking to the system. Automatic triggers occur when certain conditions are met,

Rules

Definition: Rules determine what happens (and doesn’t happen) in the system when a microinteraction.

Feedback

Definition: Information that the user sees, hears, or feels to reflect what is happening.

Loops & Mode

Definition: Meta-rules that, depending on context, change microinteraction rules and feedback

Loops determine the length of the micro interaction and whether the interaction repeats (e.g., related beeping when you leave the fridge door open) or changes over time (e.g., microwave oven reminder to pick up food changing over time).

Modes switch the functioning or operation of the system. E.g., “do not disturb” mode that changes system behavior.

Pro Tips: Minimize the scope of the microinteraction and make sure that it doesn’t turn into a feature. Best microinteractions support single task, single action.

Simpler way of thinking about microinteractions is action-feedback pairs for a single purpose.

Mobile Design Patterns

Stacks: Used to vertically organize design elements such as a toolbar, content panes, and a navigation bar to maximally utilize the vertical space in mobile devices. 竖直利用率
Screen carousels: Full-screen content panes that can be placed on a horizontal array to display different instances of the same kind of information, such as weather information. 水平滑动来浏览
Drawer: Drawers provide links for navigation or controls for the various settings of the application.
Lists & Grids: Lists involve vertically stacking a large number of items, including text, controls, and thumbnails. Grids involve a large continuous grid or multiple panes of grids that users can scroll through vertically or horizontally, commonly used for information with more visual content.
Carousels: Content carousels provide a row of content items including images or textual cards that users can navigate through by swiping left and right.
Swimlanes: Swimlanes are stacked content carousels that each show a row of items, enabling visual browsing through several different lists with minimal navigation. list + carousels
Card: Cards are little rectangles full of images and text that serve as entry points to more detailed information. They can be organized by lists and grids, including images, text, and links, on a column, row, or grid that users navigate through by swiping horizontally and vertically. ex: ipad ios store
Bars: These are vertical or horizontal strips containing buttons or tabs dedicated to different components or tools. 侧边栏和底栏，工具栏
Search, sorting, filtering: Used to enable search and filtering to navigate through a large body of content that may be distributed across the entire navigation structure of the application.搜索工具
Landing pages, guided tours: Includes a landing, welcome, or home screen that can serve as a portal to the most frequently used functions or as a guide to the next action in the task. 新手指南-> 导航页面
Advanded Direct Manipulation: Applications, such as image editors, drawing or presentation tools, or media players, enable direct- manipulation-based controls for content creation or editing. 高级编辑控制
Panes and panels: Multi-pane structures and pop-up panels and tools are commonly used in tablets to provide secondary application windows in a way that’s similar to desktop applications.
AR/VR: 混合现实

conversational interface technology

Definition: “Technology that supports conversational interaction with these VPAs [virtual personal assistants] by means of speech and other modalities.”

Components of Conversational Interfaces: 1> Speech recognition 2> Spoken language understanding 3> Dialog management 4> Response generation 5> Text-to-speech synthesis

Design principles for Conversational Interfaces

Conversational interfaces are almost always less effective(more error prone), less efficient(slow) , and less satisfactory (awkward, socially inappropriate) than graphical user interfaces.

Where to use: 1> Streamlining app installation, login, payment, notifications, and and so on in a conversational paradigm 2> In some contexts 3> CIs address many accessibility problems

Design Principles

Gricean Maxims: 1> Maxim of quality 2> Maxim of quantity 3> Maxim of relevance 4> Maxim of manner

Multimodality: 多模态 Multimodal interfaces utilize multiple modalities. Most conversational interfaces are multimodal interfaces.

Multimodality Principle: Take advantage of other modalities, e.g., visual information, vibrations.

Interaction Paradigm: Command-and-control interfaces or Conversational interfaces.

Command-and-control interfaces: Interfaces where speech input is mapped to specific system functions that are called immediately. 语音声控系统

Conversational Interfaces: Interfaces where the interaction with the system has the characteristics of human conversations, including turn taking, theoretically infinite depth, conversational markers, etc.

Turn-taking: 轮流对话式 Speaking turns are the core, cooperative structure of conversations that involves one speaker at a time and an explicit exchange of tokens. (One speaker at a time, Turn exchanges, Interruption handling)
Conversational Markers: Speech cues that indicate the state or the direction of the conversation.
- Types: Timelines (“First,” “Halfway there,” “Finally”), Acknowledgements (“Thanks,” “Got it,”, “Alright,” “Sorry about that”), Positive Feedback (“Good job,” “Nice to hear that”)

Confirmations:

Explicit confirmation: Requiring the user to confirm: “I think you want to set a reminder to ‘buy insurance before going skydiving next week.’ Is that right?“

Implicit confirmation: Letting user know what was understood: “Ok, setting a reminder to buy insurance…”

Error Handling: Deviations from expected conversational flow due to technical mistakes, unexpected user behavior, environmental influences.

Types of errors: 1> No speech detected 2> Speech detected, but nothing recognized 3> Something was recognized correctly, but the system does the wrong thing with it 4> Something was recognized incorrectly

Flowcharting Conversational Interactions: The most commonly used method of modeling and prototyping conversational interactions is defining flows that show how the interaction will flow depending on system state, user behavior, or external influences.

Experience prototyping

Conventional prototyping methods provide limited support for conversational interfaces. Hard to abstract what user will do=> We have tacit knowledge about how conversational interactions work. By acting out an interaction, we apply our knowledge to a scenario. 带入user 视角实践换位思考user的行动

We use ourselves as decoders for the norms encoded in us.

Three key uses: 1> Understanding existing user experiences and context 2> Exploring and evaluating design ideas 3> Communicating ideas to an audience

we prototype: 1> System behavior 2> User behavior 3> Interactions with context

STEPS

1> Define context (passengers using entertainment system on a bus, travelers packing their luggage.)

2> Develop Scenarios (buying a ticket, users packing, cooking a meal.)

3> Identify Design Goals ( find, filter, and purchase flights; help set and follow goals through reminders.)

4> Set up the Environment (creating props to represent devices, environmental constraints.)

5> Act out Interaction using Bodystorming (physically experiencing a situation to develop new ideas.)

6> Develop Insight What did you learn about system behavior, user behavior, and interactions with context?

Bodystorming examples: Supporting design teams in ideating and acting out human-robot interactions using a system called Synthé.

Usability Evaluation

Testing-based methods

Definition: Empirical, i.e., based on data, testing with users who represent the target population of design solutions.

The Five-E Model of Usability： Effective, Efficient, Engaging, Error Tolerant, Easy to Learn

Different design and evaluation problems will require considering the five Es with different weights.

Engaging: Use satisfaction interview questions or surveys as part of the evaluation. Do comparative preference testing of presentation design.

Error Tolerant: Observe how easily or accurately users can recover from problems when they occur.

Easy to Learn: Control how much instruction or recruit participants with different levels.

Usability Testing

Definition: Observing users performing tasks with a design solution and asking them questions about their experience with the solution. Observations include user actions, behavior, and verbal descriptions.

Formative Testing:

Definition: Testing done throughout the design process to diagnose and address design problems.

Involves small number of users; used repeatedly; informs design improvements.

Summative Testing

Definition: Testing done at the end of the design process to establish the baseline usability of the design solution.

Involves a larger number of users; comparative testing; utilizes large number of metrics and statistics methods.

Usability Testing Contexts

Laboratory Testing

Definition: Testing in the lab set up to capture user behavior through screen recording, software logging, over-the-shoulder video recording, eye tracking, etc. and to allow the design team to observe and analyze the test session.

Field Testing

Definition: Testing in the target setting of use for the design solution with the target profile of users

Guerilla Testing: Low-cost usability testing set up in a public space where passers by are recruited as test participants a volunteers or small compensation.

Remote Testing: Definition: Testing a hi-fi prototype or early version of a deployed product over the internet.

Different forms of remote testing:

— Moderated: expert guides and observes, asks questions

— Unmoderated: participants completes tasks on their own sschedule, captures behavior (e.g., A/B testing)

Key Dimensions of Usability Testing

When designing a usability test, we need to define and characterize the following four dimensions

Why: Goals Test goals should specify: 1> Desired outcomes (how the design is expected to achieve ) 2>Basis for comparison (specifies whether the outcome is with respect to a baseline )

What: Scope, task/scenarios, features, questions 从潜入深，从基础到复杂

How: Approach, metrics

Qualitative data: observations of user actions and behavior, comments, and answers to questions 定性数据

Quantitative data: measurements of user performance, error, and ratings of the design 定量数据

Who: User subgroups, study team. Team Roles (Moderator, Note-taker, Observer, Technician)

Measurement

Performance metrics

Five basic types of performance metrics: 1>Task success 2> Time-on-task 3>Errors 4>Efficiency 5> Learnability

given set of tasks then measure, quantitative measurements

Self-report metrics

Definition: Asking participants about their perceptions of and experience with a design solution using a set of questions. example: a interview, capture subjective user experiences and opinions

Participants provide quantitative (e.g., ratings, rankings) or qualitative (e.g., open-ended, narrative) responses.

SUS: Ten-item questionnaire that focuses on usability. Can be used for relative comparison or absolute benchmarking.

USE: Includes four sub-scales for usefulness, ease of use, ease of learning, and satisfaction.

Issue-based metrics

Definition: Problems that users encounter in using a system. Quantify and track specific problems or defects encountered within the system.

ex: Behaviors that prevent task completion, Misinterpreting some piece of content.

Severity ratings: Assessments of issues that help the design team prioritize design efforts.

Severity levels: 1> Low: Issues that annoy or frustrate participants but do not play a role in task failure. 2> Medium: Issues that contribute to significant task difficulty but do not cause task failure. 3> High: Issues that lead directly to task failure.

Expert-review-based methods

Definition: Also called usability inspection, review-based evaluation by experts who follow well-established protocols to inspect the usability of design solutions.

Methods: Heuristic evaluation, cognitive walkthrough, pluralistic walkthrough, feature inspection, consistency inspection, standards inspection, formal usability inspection.

Heuristic Evaluation

Definition: Developed by Jacob Nielsen, heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the “heuristics”).

1> Visibility of system status

2> Match between system and the real world: The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

3> User control and freedom: Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

4> Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. 相同的动作颜色的含义

5> Error prevention: ① Autocorrect in search ② Real-time feedback on new user names, password strength, etc. ③Attachment reminders in email clients

6> Recognition rather than recall: Recently viewed/ previous looking for, 近期浏览，历史记录

7> Flexibility and efficiency of use: Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. 新人引导，满足新手和老用户的需求

8> Aesthetic and minimalist design: 优化不必要的信息

9> Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language 让用户清晰知道错误信息，知道如何处理

10> Help and documentation help center 帮助文件

Heuristic Evaluation Reporting

Definition: A document that highlights the top three to five usability problems and suggested solutions.

Heuristic evaluation reports usually include: 1> Prototype screen, page, location of the problem 2> Name of heuristic 3>Reason for reporting as negative or positive 4> Scope of problem 5> Severity of problem (high/medium/low) 6> Justification of severity rating 7> Suggestions to fix 8> Possible trade-offs (why the fix might not work)

Pros & Cons

Pros: 1> Inexpensive and intuitive 2> Can be used frequently and any time during the design process 3> Effective at early stages of design 4> Serves as a training tool for designers

Cons: 1> Does not capture all aspects of usability 2> Does not provide a comprehensive understanding of the interaction 3> Might discourage user testing 4> May result in false positives

Heuristics for Conversational Interfaces

Seventeen heuristics that fall into five broad categories: 1> General 2> Conversational style 3> Guiding, Teaching, and Offering Help 4> Feedback and prompts 5> Errors

Cognitive Walkthrough

Definition: Expert review method where a usability specialist assesses the learnability and discoverability of a design by posing and answering a set of questions.

What we need?: 1> A prototype 2> A user profile 3> Set of tasks 4>